<template>
  <div class="stu" style="position: relative;">
       <topimg></topimg>
       <toptab :datext='datext' :shows='false'></toptab>
	   <div style="width:1100px;height:1362px;margin: 0 auto;padding-top: 30px;text-align: center;">
		   <p style="font-size:32px;line-height: 48px;margin-bottom:15px;">体验馆</p>
		   <div class="imgbox">
			  
			  <iframe class="ifm" src="https://vr.justeasy.cn/view/1ys060462i4u6r10.html" frameborder="0"></iframe>
			  
			  <div  class="f1" style="width:100%;height:342px;">
				<div style="width:704px;height:342px;overflow:hidden;">
				   <img class="df" src="http://image.fast.126net.cn/group1/M00/05/57/wKgADF1ja8GAIsFUAAGBUUPixp8153.jpg" alt="">
			    </div>
			    <div class="imgb">
				   <img class="df" src="http://image.fast.126net.cn/group2/M00/02/D9/wKgADl1ja8GAS1L5AADvwJqR5_Q253.jpg" alt="">
			    </div>  
			  </div> 
			  
			   <div class="f2" style="width:100%;height:342px;margin-top:20px;">
			     <div class="imgb" v-for="i in urlbox"><img class="df" :src="i" alt=""></div>  
			   </div>
			   
		   </div>
		   
		   
		   
	   </div>
  </div>
</template>

<script>
import topimg from '@/components/topimg.vue'
import toptab from '@/components/toptab.vue'
export default {
  name: 'stu',
  components: {topimg,toptab},//声明子组件
  computed:{},
  data(){
	  return {
		  datext:{
		  		  tetx1:'- 体验大厅',
		  		  text2:'高亿智能产品体验馆，产品体验'
		  },
		  urlbox:[
			  'http://image.fast.126net.cn/group2/M00/02/D9/wKgADl1ja8GALIx8AACi7VXTV9k419.jpg',
			  'http://image.fast.126net.cn/group1/M00/05/57/wKgADF1ja8KAC7kcAACYA1Kg7EM196.jpg',
			  'http://image.fast.126net.cn/group2/M00/02/D9/wKgADl1ja8KAILYeAACGNOS1VkI319.jpg',
		  ]
	  }
  },
  methods:{
	 
  },
  mounted(){
	  
  }
}
</script>
<style scoped="scoped">
	.ifm{
		width: 100%;
		height:500px;
		float: left;
		margin-bottom: 20px;
	}
	.df:hover{
		transform: scale(1.3); /*放大1.1倍*/
	}
	.df{
		transition:0.6s;
	}
	.imgb img{
		width:100%;
		height:100%;
	}
	.imgb{
		width: 342px;
		height:342px;
		overflow: hidden;
	}
	.f2{
		display:grid;
		grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
		grid-template-rows: repeat(1, 1fr); /* fr单位可以将容器分为几等份 */
		grid-gap:2.1%; /* grid-column-gap 和 grid-row-gap的简写 */
		grid-auto-flow: row;
	}
	.f1{
		display:grid;
		grid-template-columns: repeat(2, 1fr); /* 相当于 1fr 1fr 1fr */
		grid-template-rows: repeat(1, 1fr); /* fr单位可以将容器分为几等份 */
		grid-gap:2.2%; /* grid-column-gap 和 grid-row-gap的简写 */
		grid-auto-flow: row;
	}
	.imgbox{
		width: 100%;
		height: 726px;
		padding: 14px 16px;
	}
</style>
